<template>
  <view class="user-balance">
    <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>

    <view v-if="current == 0" class="pd-1">
      <view class="item" v-for="(item,index) in listDetails" :key="index">
        <view class="item-1">充值订单
          <view>
            <view v-if="item.status == 0">状态:<span style="color: #fbbb0c">待支付</span></view>
            <view v-else-if="item.status == 1">状态:<span style="color: #fbbb0c">已取消</span></view>
            <view v-else-if="item.status == 2">状态:<span style="color: #fbbb0c">已支付</span></view>
          </view>
        </view>
        <view class="item-2">创建时间：{{ item.createTime | timeFormat }}</view>
        <view class="item-3">
          <view v-if="item.status == 0">
            <u-button shape="circle" :custom-style="customStyle" size="medium" @click="pay(item)" type="warning">立即支付</u-button>
          </view>
        </view>
      </view>
    </view>

    <view v-else-if="current == 1" class="pd-1">
      <view v-for="(item,index) in listDetails" :key="index">
        <view v-if="item.status == 0">
          <view class="item">
            <view class="item-1">充值订单
              <view>
                <view>状态:<span style="color: #fbbb0c">待支付</span></view>
              </view>
            </view>
            <view class="item-2">创建时间：{{ item.createTime | timeFormat}}</view>
            <view class="item-3">
              <view>
                <u-button shape="circle" :custom-style="customStyle" size="medium" @click="pay(item)" type="warning">立即支付</u-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-else-if="current == 2" class="pd-1">
      <view v-for="(item,index) in listDetails" :key="index">
        <view v-if="item.status != 0">
          <view class="item">
            <view class="item-1">充值订单
              <view>
                <view v-if="item.status == 1">状态:<span style="color: #fbbb0c">已取消</span></view>
                <view v-else-if="item.status == 2">状态:<span style="color: #fbbb0c">已支付</span></view>
              </view>
            </view>
            <view class="item-2">创建时间：{{ item.createTime | timeFormat}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getUser, getUserDetailConsume} from "../../../../api/user.js";
import {timestampToTime} from "../../../../utils/Data.js";
import {getLastMonth} from "../../../../utils/Data.js";
import {checkOrder, payOrder} from "../../../../api/rechargeOrder";

export default {
  name: "index",
  async onLoad() {
    await this.getUserDetailConsume()
  },

  data() {
    return {
      list: [
        {
          name: '全部',
          count: 0
        },
        {
          name: '进行中',
          count: 0
        },
        {
          name: '已完成',
          count: 0
        }
      ],
      listDetails: [],
      current: 0,
      customStyle: {
        width: '160rpx',
        height: '60rpx',
        color: 'black',
        backgroundColor: '#fbbb0c'
      },

    }
  },
  methods: {
    async getUserDetailConsume() {
      let time = new Date();
   //    let nowTime = await timestampToTime(time.toLocaleString("en-Us", {hour12: false}).split(" "))
   //    let frontTime = await getLastMonth(nowTime)
      const userDetailConsume = await getUserDetailConsume({
        // startTime: frontTime,
        // endTime: nowTime,
        type: 1,
      });
      this.listDetails = userDetailConsume.data.data.details
      this.list[0].count = this.listDetails.length
    },
    change(index) {
      this.current = index;
    },

    //发起支付
    async pay(item) {
      const payMsg = await payOrder({
        tag: item.tag,
        id:item.id
      })

      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: payMsg.data.data.timeStamp, //时间戳
        nonceStr: payMsg.data.data.nonceStr, //随机字符串，长度为32个字符以下。
        package: payMsg.data.data.packageVal, //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx。
        signType: payMsg.data.data.signType, //签名算法，应与后台下单时的值一致
        paySign: payMsg.data.data.paySign, //签名，
        success: async function (res) {
          //手动查询订单，修改订单状态
          const result = await checkOrder({
            id:item.id
          })
          const user = await getUser(uni.getStorageSync('userInfo').id)
          uni.setStorageSync('userInfo', user.data.data);
          this.userData = user.data.data
          uni.showToast({
            title: '充值成功',
            duration: 2000
          });
          setTimeout(()=>{
            uni.navigateBack({
              delta: 1
            },1000);
          })
        },
        fail: function (err) {
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.user-balance {
  min-height: 100vh;
  background-color: #ededed;
  display: flex;
  flex-direction: column;

  .item {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 20rpx 25rpx;
    margin-top: 20rpx;
    border-radius: 15rpx;

    .item-1 {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;
      font-size: 32rpx;
      font-weight: bold;
    }

    .item-2 {
      color: #bcbcbc;
      margin-bottom: 10rpx;
    }

    .item-3 {
      margin-bottom: 10rpx;
      display: flex;
      flex-direction: row-reverse;
    }

  }


  .pd-1 {
    padding: 10rpx 30rpx;
  }
}
</style>
